<!-- 大赛详情 -->
<template>
	<view class="container">
		<view class="c-rich">
			<view class="rich-content" style="height:calc(100vh - 420rpx)">
				<mp-html :content="gameInfo.content" />
			</view>

			<view class="c-block">
				<view class="c-headline" v-if="historyList.lenght!=0">
					<text>往届赛事详情</text>
				</view>
				<scroll-view scroll-x="true" class="block-scroll">
					<view class="block-list">
						<view class="block-item" v-for="item in historyList" :key="item.id"
							@click="navigateTo('/pages/pages_game/gameHistoryDetail?url='+encodeURIComponent(item.link_url))">
							<image :src="baseURL + item.img" mode=""></image>
							<view class="block-item-info">
								<u-text :lines="2" :text="item.title"></u-text>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
			<view class="rich-btn">
				<view @click="toGameDivision" v-if="gameInfo.show_status==1">
					<text>报名参赛</text>
				</view>
				<view v-else>
					<text>暂停报名</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gameDetail",
		data() {
			return {
				gameId:'',
				// 赛事详情
				gameInfo: {},
				richContent: null,
				historyList: [] // 往届赛事列表 
			}
		},
		onLoad(query) {
			this.gameId = query.id
			this.getGameDetail(query.id)
			this.getHistoryGameDetail(query.id)
		},
		onShareAppMessage() {
			return {
				title: this.gameInfo.name,
				path: '/pages/pages_game/gameDetail?id'+this.gameId
			}
		},
		onShareTimeline() {},
		methods: {
			// 获取往届赛事信息
			getHistoryGameDetail(id) {
				this.$http.getHistoryGameDetail({
					type_id: id
				}).then(res => {
					this.historyList = res.data
				})
			},
			// 获取赛事详情
			getGameDetail(id) {
				this.$http.getGameDetail({
					id
				}).then(res => {
					this.gameInfo = res
					uni.setNavigationBarTitle({
						title: res.name
					})
				})
			},
			// 跳转赛段赛区页
			toGameDivision() {
				uni.navigateTo({
					url: "/pages/pages_game/gameDivision?id=" + this.gameInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-rich {
			width: 100%;
			padding-bottom: 100rpx;

			.rich-content {
				width: 100%;
				overflow: scroll;

				::v-deep image {
					max-width: 100vw !important;
				}

				::v-deep img {
					max-width: 100vw !important;
				}
			}

			.rich-btn {
				width: 100%;
				height: 100rpx;
				padding: 20rpx 0;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #fff;

				&>view {
					// width: 160rpx;
					// height: 60rpx;
					width: 100%;
					font-size: 38rpx;
					font-weight: bold;
					color: #4093ec;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.c-block {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				position: fixed;
				left: 0;
				bottom: 160rpx;
				overflow-x: scroll;
				.c-headline{
					font-size:28rpx;
					
				}
				.block-scroll{
					width: 100%;
					.block-list{
						width: 100%;
						display: flex;
						justify-content: space-between;
						overflow-x: auto;
						.block-item {
							width: 400rpx;
							height: 120rpx;
							padding: 15rpx;
							flex-shrink: 0;
							box-sizing: border-box;
							background-color: #fff;
							margin-right: 15rpx;
							display: flex;
							align-items: center;
							border-radius: 8rpx;
							box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.1);
						
							&>image {
								width: 90rpx;
								height: 90rpx;
								border-radius: 10rpx;
								margin-right: 15rpx;
							}
						
							.block-item-info {
								width: calc(100% - 105rpx);
								display: flex;
								flex-direction: column;
						
								&>text {
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
						
								.block-item-info_date {
									font-size: 28rpx;
									color: #888;
								}
						
								.block-item-info_title {
									font-size: 32rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
				
			}
		}

	}
</style>
